<template>
  <div>
    <div class="banner linear-bg-blue">
      <div class="amount-block">
        <h1 class="small-title">成交金额</h1>
        <span class="big-amount">{{count.amount}}</span>
      </div>
      <a href="/pages/home/data-analyze/main" class="quick-link">
        <div v-for="(item,idx) in list1" :key="idx" class="count-block">
          <h1 class="title">{{item.name}}</h1>
          <span class="value">{{count[item.key]}}</span>
        </div>
      </a>
    </div>
    <div class="quick-wrap">
      <a v-for="(item,idx) in list2" :key="idx" :href="item.link" class="link">
        <img :src="item.img" mode="widthFix" class="fake">
      </a>
    </div>
  </div>
</template>

<script>
import { formatNumber2 } from '@/utils'
import { SHOP_COLLECTION_COUNT, FIND_SHOP_ORDER_PAGE } from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      countForm: {
        amount: 0,
        collect: 0,
        orderTotal: 0,
        memberTotal: 0
      },
      list1: [
        { name: '订单数', key: 'orderTotal' },
        { name: '收藏数', key: 'collect' },
        { name: '会员数', key: 'memberTotal' }
      ],
      list2: [
        {
          img: '/static/assets/img/sy_qfx.png',
          link: '/pages/home/share/main'
        },
        {
          img: '/static/assets/img/sy_pt.png',
          link: '/pages/home/group/index/main'
        }
        // { img: '/static/assets/img/sq.png', link: '/pages/home/community/main' }
      ]
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    },
    count () {
      let obj = { ...this.countForm }
      obj.amount = formatNumber2(this.countForm.amount) + '(fake)'
      return obj
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.initPage()
  },
  methods: {
    initPage () {
      this.shopSaleAmountCount()
      this.shopMemberCount()
      this.shopCollectionCount()
      this.shopOrderCount()
    },

    shopSaleAmountCount () {
      this.countForm.amount = Math.floor(Math.random() * 10000)
    },
    shopMemberCount () {
      this.countForm.memberTotal = Math.floor(Math.random() * 100) + '(fake)'
    },
    shopCollectionCount () {
      const vm = this

      SHOP_COLLECTION_COUNT(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            vm.countForm.collect = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    shopOrderCount () {
      const vm = this

      let params = {
        shopId: vm.account.shopId
      }

      FIND_SHOP_ORDER_PAGE(params, 1, 1)
        .then(r => {
          if (r.data.code === '0') {
            vm.countForm.orderTotal = r.data.data.total
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.banner {
  padding: 15px 0;
  box-shadow: 0 3px 5px $light-black;
  > .amount-block {
    text-align: center;
    margin: 30px 0 15px;
    > .small-title {
      font-size: 12px;
    }
    > .big-amount {
      font-size: 30px;
    }
  }
  > .quick-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    > .count-block {
      width: 33%;
      text-align: center;
      &:not(:last-child) {
        border-right: 1px solid $light-white;
      }
      > .title {
        font-size: 12px;
      }
      > .value {
        font-size: 16px;
      }
    }
  }
}
.quick-wrap {
  padding: 15px;
  > .link {
    width: 100%;
    > .fake {
      width: 100%;
    }
  }
}
</style>
